<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<style>
    .d1{
        height: 60px;
        width: 120px;
        background-repeat: no-repeat;
        background-image: url("../img/bg1.png");
    }
    .d2{
        height: 60px;
        width: 120px;
        background-repeat: no-repeat;
        background-image: url("../img/bg2.png");
    }
    .d3{
        height: 60px;
        width: 120px;
        background-repeat: no-repeat;
        background-image: url("../img/bg3.png");
    }
    .d4{
        height: 60px;
        width: 120px;
        background-repeat: no-repeat;
        background-image: url("../img/bg4.png");
    }
    .d1:hover{
        background-image: url("../img/bg5.png");
    }
    .d2:hover{
        background-image: url("../img/bg6.png");
    }
    .d3:hover{
        background-image: url("../img/bg7.png");
    }
    .d4:hover{
        background-image: url("../img/bg8.png");
    }
    
</style>

    <table>
        <tr>
            <td class="d1"></td>
            <td class="d2"></td>
            <td class="d3"></td>
            <td class="d4"></td>
            
        </tr>
    </table>
</body>
</html>